<template>
    <div class="main-page">
        <el-row type="flex" justify="space-around">
            <el-card class="box-card">
                <el-row><div class="total-title">本月收入</div></el-row>
                <el-row><div class="total-item-value">￥20</div></el-row>
              <div class="total-item-desc">日均收入金额 ￥30</div>
            </el-card>
            <el-card class="box-card">
                <el-row><div class="total-title">本月收入</div></el-row>
                <el-row><div class="total-item-value">￥20</div></el-row>
                <div class="total-item-desc">日均收入金额 ￥30</div>
            </el-card>
            <el-card class="box-card">
                <el-row><div class="total-title">本月收入</div></el-row>
                <el-row><div class="total-item-value">￥20</div></el-row>
                <div class="total-item-desc">日均收入金额 ￥30</div>
            </el-card>
            <el-card class="box-card">
                <el-row><div class="total-title">本月收入</div></el-row>
                <el-row><div class="total-item-value">￥20</div></el-row>
                <div class="total-item-desc">日均收入金额 ￥30</div>
            </el-card>
        </el-row>
        <el-row style="margin-top: 30px" type="flex">
            <el-radio-group size="small" v-model="radio3">
                <el-radio-button label="总金额"></el-radio-button>
                <el-radio-button label="新签金额"></el-radio-button>
                <el-radio-button label="续费金额"></el-radio-button>
                <el-radio-button label="退费金额"></el-radio-button>
                <el-radio-button label="消课统计"></el-radio-button>
            </el-radio-group>
        </el-row>
        <el-row type="flex" justify="start" style="margin-top: 30px">
            <el-col>
                <el-radio-group size="small" v-model="radio3">
                    <el-radio-button label="按课程"></el-radio-button>
                    <el-radio-button label="按月"></el-radio-button>
                    <el-radio-button label="按周"></el-radio-button>
                    <el-radio-button label="按日"></el-radio-button>
                </el-radio-group>
                <el-date-picker
                    size="small"
                    v-model="value7"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions2">
                </el-date-picker>
            </el-col>

        </el-row>
        <el-card style="margin-top: 10px">
            <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
        </el-card>
    </div>


</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import addStudent from '../page/addStudent'
    import updateStudent from '../page/updateStudent'
    import userDetail from '../page/userDetail.vue'
    import {userList, getuserDetail, returncharge, updateUserStatus, updateUser, deleteUser} from '@/api/getData'
    import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        data() {
            return {
                radio3: '上海',
            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,
            addStudent,
            userDetail,
            updateStudent,

        },

        computed: {
            ...mapGetters([''])
        },

        created() {
        },
        mounted() {
            this.drawLine();

        },
        methods: {
            ...mapActions(['']),
            drawLine() {
                var myChart = this.$echarts.init(document.getElementById('myChart'))
                myChart.setOption({
                    title: {
                        text: ''
                    },
                    tooltip: {}
                    ,
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line'
                    }]
                })
                ;
            }


        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .total-item-border {
        background-color: #bbbbbb;
    }

    .box-card {
        position: relative;
        width: 24%;
        height: 150px;
    }
    .total-title {
        font-size:14px;

    }
    .total-item-value {
        font-size:30px;
        font-weight: bold;

    }
    .total-item-desc {
        position: absolute;
        bottom:2%;
        font-size:14px;

    }

</style>
